<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>社保费</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="widtd=device-widtd, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all"/>
    <link rel="stylesheet" href="../css/main.css" media="all"/>
    <link rel="stylesheet" href="../css/socialFee.css" media="all"/>
</head>
<body class="childrenBody all">
<div id="all">
    <div class="top" id="socialFee">
        <div>
            <button type="button" class="layui-btn" @click="adduser(1)"><i class="layui-icon">&#xe608;</i> 添加</button>
            <button type="button" @click="exports" class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe621;</i>导出
            </button>
        </div>
        <div class="top_right">
            <!--<div class="layui-input-inline">-->
                <!--<input type="tel" name="phone" lay-verify="required|phone" placeholder="搜索项目序号、员工编号、费用类型、名称、使用人员"-->
                       <!--autocomplete="off" class="layui-input">-->
            <!--</div>-->
            <!--<div>-->
                <!--<button type="button" class="layui-btn layui-btn-normal">搜索</button>-->
            <!--</div>-->
        </div>
    </div>
    <div class="tabs">
        <table class="layui-table" id="socialFees">
            <tr class="gray" style="font-weight: bold">
                <td>操作</td>
                <td>序号</td>
                <td>填写日期</td>
                <td>填表人</td>
                <td>员工编号</td>
                <td>姓名</td>
                <td>星级</td>
                <td>单位(基数)<br/>年薪/社保费</td>
                <td>数量(系数)</td>
                <td>单价(日薪)</td>
                <td>金额</td>
                <td>岗位</td>
                <td>备注</td>
            </tr>
            <tr class="" v-for="item in arr">
                <td>
                    <span class="operation" @click="adduser(2, item.id)">编辑</span>
                    <span @click="del(item.id)" class="operation">删除</span>
                </td>
                <td>{{item.id}}</td>
                <td>{{item.createtime}}</td>
                <td>{{item.user_name}}</td>
                <td>{{item.user_id}}</td>
                <td>{{item.yg_name}}</td>
                <td>{{item.yg_star}}</td>
                <td>{{item.unit}}</td>
                <td>{{item.num}}</td>
                <td>{{item.money}}</td>
                <td>{{item.total}}</td>
                <td>{{item.yg_position}}</td>
                <td>{{item.note}}</td>
            </tr>
            <tr class="gray">
                <td colspan="4"></td>
                <td colspan="6"><b>社保费合计</b></td>
                <td>{{s1}}</td>
                <td colspan="2"></td>
            </tr>
        </table>
    </div>
    <div class="x-body" id="addopen" style="display: none;padding-top: 10px">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="yg_name" class="layui-form-label">
                    <span class="x-red">*</span>员工姓名
                </label>
                <div class="layui-input-inline">
                    <select id="yg_name" lay-filter="demo1" lay-search="" name="yg_name" class="valid">

                    </select>
                </div>
                <label for="yg_position" class="layui-form-label">
                    <span class="x-red">*</span>岗位
                </label>
                <div class="layui-input-inline">
                    <select id="yg_position" lay-filter="demo2" lay-search="" name="yg_position" class="valid">

                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="yg_star" class="layui-form-label">
                    <span class="x-red">*</span>星级
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="yg_star" v-model="yg_star" disabled name="yg_star"
                           autocomplete="off" lay-verify="required" class="layui-input">
                </div>
                <label for="yg_num" class="layui-form-label">
                    <span class="x-red">*</span>员工编号
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="yg_num" v-model="yg_num" disabled name="yg_num"
                           autocomplete="off" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="unit" class="layui-form-label">
                    <span class="x-red">*</span>基数
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="unit" v-model="unit" name="unit"
                           autocomplete="off" lay-verify="required" class="layui-input">
                </div>
                <label for="num" class="layui-form-label">
                    <span class="x-red">*</span>数量(系数)
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="num" v-model="num"  name="num"
                           autocomplete="off"  lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="money" class="layui-form-label">
                    <span class="x-red">*</span>单价
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="money" v-model="money"  disabled name="money"
                           autocomplete="off" lay-verify="required" class="layui-input">
                </div>
                <label for="total" class="layui-form-label">
                    <span class="x-red">*</span>金额
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="total" v-model="total" disabled name="total"
                           autocomplete="off" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="note" class="layui-form-label">
                    <span class="x-red">*</span>备注
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="note" v-model="note" name="note"
                           autocomplete="off" lay-verify="required" class="layui-input">
                </div>
                <label for="tcreatetime" class="layui-form-label">
                    <span class="x-red">*</span>日期
                </label>
                <div class="layui-input-inline">
                    <input type="text" name="tcreatetime" lay-verify="date" placeholder=""
                           autocomplete="off" placeholder="选择日期" class="layui-input" id="tcreatetime">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                </label>
                <button class="layui-btn" type="button" lay-filter="add" lay-submit="">
                    保存
                </button>
            </div>
        </form>
    </div>
</div>
<div id="demo8"></div>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../layui/layui.all.js"></script>
<script type="text/javascript" src="../js/main.js"></script>
<script type="text/javascript" src="../js/excel.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
</body>
</html>
<script>
    var vm = new Vue({
        el: '#all',
        data: {
            page: 1,
            project_id: sessionStorage.getItem('projectopt'),
            arr: [],
            count: 0, //总条数
            s1: 0, //金额
            yg_num: '', //编号
            yg_star: '', //星级
            yid: '', //select选项id
            unit: 0, //基数
            num: 0, //数量
            money: 0, //单价
            total: 0, //金额
            yg_position: '', //岗位
            note: '', //备注
            stus: '', //新增修改标识
            tid: '', //当前编辑id
            permissions:'',//权限标识
            cuobj: ''
        },
        created: function () {
            this.initData();
        },
        mounted: function(){
            layui.use(['laypage', 'layer', 'element', 'form'], function () {
                var laypage = layui.laypage,
                    layer = layui.layer,
                    form = layui.form,
                    element = layui.element,
                    laydate = layui.laydate,
                    $ = layui.jquery;

                laydate.render({
                    elem: '#tcreatetime',
                    value: new Date()

                })
                //自定义排版
                laypage.render({
                    elem: 'demo8'
                    , count: 1000
                    , layout: ['limit', 'prev', 'page', 'next']
                });
                form.on('select(demo1)', function (data) {
                    var da = data.value;
                    var load = layer.load(2, {
                        shade: [0.6, '#fff'] //0.1透明度的白色背景
                    })
                    var opvalue =  '';
                    opvalue += '<option value="">请选择</option>';
                    var obj = {
                        project_id: vm.project_id,
                        type: 4,
                        name: da
                    }
                    $("#yg_num").val('');
                    $("#yg_star").val('');
                    $("#yg_position").val('');
                    $("#yg_position").empty();
                    $.when(PUATTRBUTE.REQUESTFUN('api/Classify/fenleitwo', obj).done(function (res) {
                            if (res.code == 1) {
                                var arr = res.data;
                                for (item in arr) {
                                    opvalue += '<option   value="' + arr[item].id + ',' + arr[item].number + ',' + arr[item].star+'">' + arr[item].position + '</option>'
                                }
                                $("#yg_position").append(opvalue);
                                layui.form.render('select');// 再次渲染select
                                if(vm.cuobj.staff_id){
                                    var selects = 'dd[lay-value="'+ vm.cuobj.staff_id + ',' + vm.cuobj.yg_num + ',' + vm.cuobj.yg_star + '"]';// 设置value
                                    $('#yg_position').siblings("div.layui-form-select").find('dl').find(selects).click();
                                    vm.cuobj = '';
                                }

                            }
                            layui.layer.close(load)
                        })
                    )
                });
                form.on('select(demo2)', function (data) {
                    var darr = data.value.split(',');
                    vm.yg_num = darr[1];
                    vm.yg_star = darr[2];
                    vm.yid = darr[0];
                })
                form.on('submit(add)', function (data) {
                    var load = layer.load(2, {
                        shade: [0.6, '#fff'] //0.1透明度的白色背景
                    })
                    var obj = {
                        project_id: vm.project_id,
                        num: data.field.num,
                        unit: data.field.unit,
                        note: data.field.note,
                        staff_id: vm.yid,
                        createtime: data.field.tcreatetime
                    }
                    var url = '';
                    if (vm.stus == 1) {
                        url = 'api/Social/shebaomoneyadd';
                    } else {
                        url = 'api/Social/shebaomoneyeditdo';
                        obj.id = vm.tid;
                    }
                    $.when(PUATTRBUTE.REQUESTFUN(url, obj).done(function (res) {
                            layui.layer.close(load)
                            if (res.code == 1) {
                                layui.layer.msg(res.msg, {time: 1000, icon: 1});
                                vm.initData();
                                vm.num = 0;
                                vm.unit = 0;
                                vm.note = '';
                                vm.yg_star= '';
                                vm.money= 0;
                                vm.total= 0;
                                vm.yg_num='', //编号
                                    layer.closeAll();
                                layui.form.render();
                            } else {
                                layui.layer.msg(res.msg, {time: 1000, icon: 2})
                            }
                        })
                    )
                })
            });
            this.initselect();
        },
        methods: {
            //初始化数据
            initData: function () {
                var obj = {
                    page: this.page,
                    limit: 12,
                    project_id: this.project_id
                }
                var load = layer.load(2, {
                    shade: [0.6, '#fff'] //0.1透明度的白色背景
                })
                $.when(PUATTRBUTE.REQUESTFUN('api/Social/shebaomoneyindex', obj).done(function (res) {
                        layer.close(load)
                        if (res.code == 1) {
                            vm.arr = res.data.part;
                            var data = res.data.part;
                            var t1 = 0;
                            for (item in data) {
                                t1 += parseFloat(data[item].total);
                            }
                            vm.s1 = t1;
                            if (vm.page == 1) {
                                vm.initpage(res.data.count);
                            }
                        } else {
                            vm.initpage(0);
                            if(res.msg == "暂无权限"){
                                vm.permissions= 1 ;
                            }
                            layer.msg(res.msg, {time: 1000, icon: 2})
                        }
                    })
                )
            },
            initpage: function (count) {
                //自定义排版
                layui.laypage.render({
                    elem: 'demo8'
                    , count: count
                    , limit: 12
                    , jump: function (obj, first) {
                        if (!first) {
                            vm.page = obj.curr;
                            vm.initData();
                        }
                    }
                });
            },
            //打开面板
            adduser: function (idx, tid) {
                if(this.permissions == 1){
                    layer.alert("抱歉，您没有此权限！");
                }else {
                    var title = ''
                    this.stus = idx;
                    this.tid = tid;
                    vm.num = 0;
                    vm.unit = 0;
                    vm.note = '';
                    vm.yg_star = '';
                    vm.money = 0;
                    vm.total = 0;
                    vm.yg_num = ''; //编号
                    vm.yg_position = ''; //岗位
                    $("#tcreatetime").val(PUATTRBUTE.NEWDATE());
                    var select = 'dd[lay-value=""]';// 设置value
                    $('#yg_name').siblings("div.layui-form-select").find('dl').find(select).click();
                    $('#yg_position').siblings("div.layui-form-select").find('dl').find(select).click();
                    layui.form.render();
                    if (idx == 1) {
                        title = '新增社保信息';
                    } else {
                        //编辑初始化数据
                        var obj = {
                            id: tid,
                            project_id: vm.project_id
                        }
                        title = '编辑社保信息';
                        $.when(PUATTRBUTE.REQUESTFUN('api/Social/shebaomoneyedit', obj).done(function (res) {
                                if (res.code == 1) {
                                    var select = 'dd[lay-value="' + res.data.yg_name + '"]';// 设置value
                                    $('#yg_name').siblings("div.layui-form-select").find('dl').find(select).click();
                                    var obj = {
                                        yg_num: res.data.yg_num,
                                        yg_star: res.data.yg_star,
                                        staff_id: res.data.staff_id
                                    }
                                    vm.cuobj = obj;
                                    layui.form.render('select');// 再次渲染select
                                    vm.yid = res.data.staff_id;
                                    vm.unit = res.data.unit; //基数
                                    vm.num = res.data.num; //数量
                                    vm.money = res.data.money; //单价
                                    vm.total = res.data.total; //金额
                                    vm.note = res.data.note;//备注
                                    $('#tcreatetime').val(vm.formatDate(res.data.createtime));
                                } else {
                                    layer.msg(res.msg, {time: 1000, icon: 2})
                                }
                            })
                        )
                    }
                    layui.form.render('select');// 再次渲染select
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['650px', '500px'], //宽高
                        title: title,
                        content: $("#addopen")
                    });
                }
            },
            formatDate: function (crtime) {
                var date = new Date(parseInt(crtime) * 1000) // 时间戳为10位需乘1000，为13位则不用
                var Y = date.getFullYear() // 年
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) // 月
                var D = date.getDate() < 10 ? '0' + date.getDate() + '' : date.getDate() + '' // 日
                return Y + '-' + M + '-' + D // yyyy-mm-dd
            },
            //初始化select
            initselect: function () {
                var mechanical = "";
                mechanical += '<option value="">请选择</option>';
                var obj = {
                    project_id: this.project_id,
                    type: 4
                }
                $.when(PUATTRBUTE.REQUESTFUN('api/Classify/fenleione', obj).done(function (res) {
                        if (res.code == 1) {
                            var arr = res.data;
                            for (item in arr) {
                                mechanical += '<option   value="' + arr[item].name +'">' + arr[item].name + '</option>'
                            }
                            $("#yg_name").append(mechanical);
                        } else {
                            layer.msg(res.msg, {time: 1000, icon: 2})
                        }
                    })
                )
                layui.form.render();
            },
            //导出
            exports: function () {
                if(this.permissions == 1){
                    layer.alert("抱歉，您没有此权限！");
                }else {
                    var tableHtml = $('#socialFees');
                    $(tableHtml).css({
                        'border':'1px solid #d5d5d2',
                        'text-align':'center',
                        'border-collapse':'collapse',
                    });
                    $(tableHtml).find('tr td').css({
                        'text-align':'center',
                        'border':'1px solid #d5d5d2',
                        'line-height':'30px',
                        'padding':'0px 10px',
                        'min-width':'100px'
                    });
                    var html = "<html><head><meta charset='utf-8' /></head><body>" + tableHtml[0].outerHTML + "</body></html>";
// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
                    var blob = new Blob([html], { type: "application/vnd.ms-excel" });
                    var urlA = document.createElement('a');
// 利用URL.createObjectURL()方法为a元素生成blob URL
                    $('.table-btn-group').append(urlA);
                    urlA.href = URL.createObjectURL(blob);
// 设置文件名，目前只有Chrome和FireFox支持此属性
                    urlA.download = "社保费.xls";
                    urlA.click();
                }
            },
            //删除
            del: function (e) {
                var obj = {
                    id: e,
                    project_id: vm.project_id
                }
                layer.confirm('确定删除吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    var load = layer.load(2, {
                        shade: [0.6, '#fff'] //0.1透明度的白色背景
                    })
                    $.when(PUATTRBUTE.REQUESTFUN('api/Social/shebaomoneydel', obj).done(function (res) {
                            layer.close(load);
                            if (res.code == 1) {
                                layer.msg(res.msg, {time: 1000, icon: 1})
                                vm.initData();
                            } else {
                                layer.msg(res.msg, {time: 1000, icon: 2})
                            }
                        })
                    )
                }, function () {
                    layer.closeAll();
                });
            }
        },
        watch:{
            unit: function(){
                if(this.unit!= 0 && this.num != 0){
                    var ta = ((this.unit * this.num)/30);
                    this.money =  PUATTRBUTE.CHANGETWO(ta);
                    this.total = this.money;
                }
            },
            num: function(){
                if(this.unit!= 0 && this.num != 0){
                    var ta = ((this.unit * this.num)/30);
                    this.money =  PUATTRBUTE.CHANGETWO(ta);
                    this.total = this.money;
                }
            }


        },
    })
</script>

